import Taro, { useState, useEffect } from '@tarojs/taro';
import { View, Text, ScrollView, Image } from '@tarojs/components';
import { AtAvatar, AtList, AtListItem } from 'taro-ui';
import Utils from '../../utils/index';
import './index.less';
import 'taro-ui/dist/style/components/article.scss';

const My = () => {
  // pages/my/version/index
  const [listItem, setListItem] = useState<any[]>([
    {
      title: '个人简介',
      value: 'user',
    },
    {
      title: '版本更新历史',
      value: 'bookmark',
    },
    {
      title: '意见建议',
      value: 'message',
    },
  ]);
  const onScrollToUpper = () => {};
  const onScroll = val => {
    // console.log(val);
  };
  // 点击列表项
  const hanldeList = val => {
    let path = '';
    switch (val.title) {
      case '个人简介':
        path = '/pages/my/info/index';
        break;
      case '版本更新历史':
        path = '/pages/my/version/index';
        break;
      case '意见建议':
        break;
    }
    Taro.navigateTo({
      url: path,
    }).then(() => {});
  };
  const scrollTop = 0;
  const Threshold = 100;
  return (
    <ScrollView
      style={Utils.scrollHeight}
      scrollY
      scrollWithAnimation
      scrollTop={scrollTop}
      lowerThreshold={Threshold}
      upperThreshold={Threshold}
      onScrollToUpper={onScrollToUpper} // 使用箭头函数的时候 可以这样写 `onScrollToUpper={this.onScrollToUpper}`
      onScroll={onScroll}
    >
      <View className="container">
        <View className="avatar">
          <Image className="image" src={require('../../assets/images/avatar.jpg')} />
          <Text className="at-article__h3">EightDoor</Text>
        </View>
      </View>
      <View className="bottomList">
        <AtList>
          {listItem.map(item => {
            return (
              <AtListItem
                onClick={() => {
                  hanldeList(item);
                }}
                key={item.title}
                title={item.title}
                arrow="right"
                iconInfo={{ size: 25, color: '#78A4FA', value: item.value }}
              />
            );
          })}
        </AtList>
      </View>
    </ScrollView>
  );
};

export default My;
